<template>
    <div class="icons">
        <!--swiper包裹-->
        <swiper :options="swiperOption">
          <swiper-slide v-for="(items,index) in page" :key="index">
            <div class="icon" v-for="(item,index) in items" :key="item.id">
              <img :src="item.url" alt="">
              <p>{{item.txt}}</p>
            </div>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "Icons",
        props:{//接受参数
          icons:Array
        },
        data(){
          return {
            swiperOption:{
              pagination:".swiper-pagination"
            },
             // iconsUrl:[
             //   {id:"001",txt:"景点门票",url:"https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png"},
             //   {id:"002",txt:"故宫",url:"https://imgs.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png"},
             //   {id:"003",txt:"北京必游",url:"https://imgs.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png"},
             //   {id:"004",txt:"南宫养生温泉",url:"https://imgs.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png"},
             //   {id:"005",txt:"一日游",url:"https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png"},
             //   {id:"006",txt:"古北水镇",url:"https://imgs.qunarzz.com/piao/fusion/1803/67/9a1678221b8e0e02.png"},
             //   {id:"007",txt:"北京滑雪",url:"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png"},
             //   {id:"008",txt:"北京欢乐谷",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"},
             //   {id:"009",txt:"北京欢乐谷",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"},
             //   {id:"010",txt:"北京欢乐谷",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"}
             // ]
          }
        },
        computed:{ //计算属性
            page (){
                const pages=[];
                this.icons.forEach((item,index)=>{//最数据进行循环
                    const page=Math.floor(index / 8);// ? 0 0 0 0  0 0 0 0  如果index=8 有9条数据
                    if(!pages[page]){//非空验证
                        pages[page]=[];
                    }
                    pages[page].push(item);//[[{},{}],[{},{}]]
            });
                console.log(pages);
                return pages;
            }
        }
    }
</script>

<style lang="stylus" scoped>

  .icons >>> .swiper-container{
      overflow hidden
      height:0;
      width: 100%
      padding-bottom:50%;

  }
  .icons  >>> .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom:-1px;
  }
  .icons >>> .swiper-pagination-bullet-active{
    background :#00bcd4;
  }

   img{
     width: 100%
    }
   .icons{
     //  overflow hidden
      // height:0;
      // width: 100%
      // padding-bottom:50%;
       /*background #eaeaea*/
      border-bottom : 1px solid #eaeaea;
     padding-bottom :5px;
     .icon{
        width: 25%;
        height:0;
        padding-bottom :25%
        float left
        text-align center
        img{
          width: 60%
          margin-top:.07rem;
        }
       p{
         color:#6f6f6f;
         margin-top :0.03rem;
         font-size :.14rem;
       }
     }
   }
</style>
